<div>
  <p translate>Provide the details for the l7 rule.</p>

  <div class="row">

    <div class="col-xs-12 col-sm-8 col-md-6">
      <div class="form-group">
        <label class="control-label required" translate>Invert</label>
        <div class="form-field">
          <div class="btn-group">
            <label class="btn btn-default"
                   ng-repeat="option in model.yesNoOptions"
                   ng-model="model.spec.l7rule.invert"
                   uib-btn-radio="option.value">{$ ::option.label $}</label>
          </div>
        </div>
      </div>
    </div>

  </div>

  <div class="row">

    <div class="col-xs-12 col-sm-8 col-md-6">
      <div class="form-group required">
        <label class="control-label" for="type">
          <translate>Type</translate>
          <span class="hz-icon-required fa fa-asterisk"></span>
        </label>
        <select class="form-control" name="type" id="type"
                ng-options="type for type in model.l7ruleTypes"
                ng-model="model.spec.l7rule.type"
                ng-required="true">
        </select>
      </div>
    </div>

    <div class="col-xs-12 col-sm-8 col-md-6" ng-if="(model.spec.l7rule.type === 'COOKIE') || (model.spec.l7rule.type === 'HEADER')">
      <div class="form-group required">
        <label translate class="control-label" for="key">Key</label>
        <input name="key" id="key" type="text" class="form-control"
               ng-model="model.spec.l7rule.key" ng-required="true">
      </div>
    </div>

  </div>

  <div class="row">

    <div class="col-xs-12 col-sm-8 col-md-6" ng-if="model.spec.l7rule.type === 'FILE_TYPE'">
      <div class="form-group required">
        <label class="control-label" for="compare_type">
          <translate>Compare Type</translate>
          <span class="hz-icon-required fa fa-asterisk"></span>
        </label>
        <select class="form-control" name="compare_type" id="compare_type"
                ng-options="compare_type for compare_type in model.l7ruleFileTypeCompareTypes"
                ng-model="model.spec.l7rule.compare_type"
                ng-required="true">
        </select>
      </div>
    </div>

    <div class="col-xs-12 col-sm-8 col-md-6" ng-if="model.spec.l7rule.type !== 'FILE_TYPE'">
      <div class="form-group required">
        <label class="control-label" for="compare_type">
          <translate>Compare Type</translate>
          <span class="hz-icon-required fa fa-asterisk"></span>
        </label>
        <select class="form-control" name="compare_type" id="compare_type"
                ng-options="compare_type for compare_type in model.l7ruleCompareTypes"
                ng-model="model.spec.l7rule.compare_type"
                ng-required="true">
        </select>
      </div>
    </div>

    <div class="col-xs-12 col-sm-8 col-md-6">
      <div class="form-group required">
        <label translate class="control-label" for="rule_value">Value</label>
        <input name="rule_value" id="rule_value" type="text" class="form-control"
               ng-model="model.spec.l7rule.rule_value" ng-required="true">
      </div>
    </div>

  </div>

  <div class="row">

    <div class="col-xs-12 col-sm-8 col-md-6">
      <div class="form-group">
        <label class="control-label required" translate>Admin State Up</label>
        <div class="form-field">
          <div class="btn-group">
            <label class="btn btn-default"
                   ng-repeat="option in model.yesNoOptions"
                   ng-model="model.spec.l7rule.admin_state_up"
                   uib-btn-radio="option.value">{$ ::option.label $}</label>
          </div>
        </div>
      </div>
    </div>

  </div>

</div>
